<template>
  <!-- 钥匙的记录 -->
  <div class="equipment-size borderStyle">
    <div class="equipment-size-title blueTitleStyle">钥匙的记录</div>
    <div class="equipment-size-content bigTableStyle">
      <div class="table-box">
        <el-table
        border
          :data="tableData"
          style="width: 100%"
          height="100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="myIndex" label="序号" width="120"></el-table-column>
          <el-table-column prop="operationContent" label="操作对象" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="operationObject" label="操作内容" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="operationReason" label="操作原因" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="operator" label="操作人" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="operationTime" label="操作时间" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="keyFirm" label="厂家名称" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </div>
      <div class="pagination-box elPaginationStyle centerbox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages.pageSize"
          layout="total,prev, pager, next,sizes, jumper"
          :total="pages.totalSize"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import { JointInspectionModule } from "@/store/modules/JointInspection";
@Component({})
export default class equipmentSize extends Vue {
  @Prop() formData!: any;
  tableData: Array<object> = [];
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  pages: any = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  params: {}; // 接口传参
  //   分页
  handleSizeChange(val: any) {
    this.pages.pageSize = val;
    this.pages.page = 1;
    this.fetch();
    // console.log(`每页 ${val} 条`);
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.fetch();
  }

  mounted() {
    // this.fetch();
  }

  @Watch("formData", { immediate: true, deep: true })
  public changeRouter(to: any) {
    this.fetch();
  }

  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }
  fetch() {
    var localCity = "";
    if (this.CompanyList && this.CompanyList[0] && this.CompanyList[0].code) {
      localCity = this.CompanyList[0].code;
    } else {
      // localCity = "8a1ea5c64bdebad1014bdebc6047087b";
      localCity = "8a1ea5c64bdebad1014bdebc55c80003"; // 济南
    }
    if (this.formData.strtimeedntime && this.formData.strtimeedntime.length) {
      this.params = {
        localCity: localCity,
        keyFirm: this.formData.keyFirm || undefined,
        reasonCode: this.formData.reasonCode || undefined,
        voltageLevel: this.formData.voltageLevel || undefined,
        bdzid: this.formData.stationId || undefined,
        content: this.formData.handleContent || undefined,
        czkssj: this.formData.strtimeedntime[0] || undefined,
        czjssj: this.formData.strtimeedntime[1] || undefined,
        page: this.pages.page,
        size: this.pages.pageSize,
      };
    } else {
      this.params = {
        localCity: localCity,
        keyFirm: this.formData.keyFirm || undefined,
        reasonCode: this.formData.reasonCode || undefined,
        voltageLevel: this.formData.voltageLevel || undefined,
        bdzid: this.formData.stationId || undefined,
        content: this.formData.handleContent || undefined,
        page: this.pages.page,
        size: this.pages.pageSize,
      };
    }

    (this as any).$services
      .getKeyRecordData({ data: this.params })
      .then((result: any) => {
        if (result.data) {
          let page = this.pages.page;
      let size = this.pages.pageSize;
          this.tableData = result.data.records.map((v, i) => {
        v.myIndex = (page - 1) * size + i + 1;
        return v;
      });
          this.pages = {
            pageSize: result.data.size,
            page: result.data.current,
            totalSize: result.data.total,
          };
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.equipment-size {
  width: 100%;
  height: 100%;
  &-title {
    width: 3rem;
    height: 0.26rem;
  }
  &-content {
    width: 100%;
    height: calc(100% - 0.26rem);
    .table-box {
      width: 100%;
      height: calc(100% - 0.6rem);
    }
    .pagination-box {
      width: 100%;
      height: 0.6rem;
    }
  }
}
</style>